<template>
  <el-scrollbar class="shop-detail-container">
    <!-- 头部信息 -->
    <el-page-header
      style="padding: 24px 24px 0 24px"
      :icon="null"
      @back="router.back()"
    >
      <template #title>
        <span style="color: aquamarine">返回汽车店列表</span>
      </template>
      <template #content>
        <div class="header-content">
          <el-avatar :size="72" :src="data.logo" class="shop-logo">
            <span v-if="!data.logo" class="logo-placeholder"> </span>
          </el-avatar>
          <div class="header-text">
            <h1 class="shop-title">{{ data.name }}</h1>
            <div class="shop-meta">
              <el-tag
                :type="
                  data.isBan ? 'danger' : data.isOpen ? 'success' : 'warning'
                "
                effect="dark"
                class="status-tag"
              >
                {{ data.isBan ? "封禁中" : data.isOpen ? "营业中" : "停业中" }}
              </el-tag>
              <span class="create-time">
                <i class="el-icon-time"></i>
                入驻时间：{{ data.createdAtStr }}
              </span>
            </div>
          </div>
        </div>
      </template>
      <template #extra>
        <el-button
          :type="data.isBan ? 'success' : 'danger'"
          @click="handleToggleBlock"
        >
          {{ data.isBan ? "解除封禁" : "封禁店铺" }}
        </el-button>
      </template>
    </el-page-header>

    <!-- 主体内容 -->
    <el-tabs v-model="activeTab" class="main-tabs">
      <!-- 基础信息 -->
      <el-tab-pane label="基础信息" name="basic">
        <el-scrollbar style="height: calc(100vh - 48px - 50px - 195px)">
          <el-descriptions :column="2" border>
            <!-- 基础信息 -->
            <el-descriptions-item label="店铺编号" :span="2">{{
              data.id || "无"
            }}</el-descriptions-item>
            <el-descriptions-item label="店铺名称">{{
              data.name || "无"
            }}</el-descriptions-item>
            <el-descriptions-item label="店铺类型">{{
              data.ype || "无"
            }}</el-descriptions-item>

            <!-- 状态信息 -->
            <el-descriptions-item label="是否封禁">
              {{ data.isBan ? "是" : "否" }}
            </el-descriptions-item>
            <el-descriptions-item label="是否自营">
              {{ data.isSelf ? "是" : "否" }}
            </el-descriptions-item>
            <el-descriptions-item label="营业状态">
              {{ data.isOpen ? "营业中" : "已关闭" }}
            </el-descriptions-item>

            <!-- 地址信息 -->
            <el-descriptions-item label="所在地区" :span="2">
              {{
                [data.province, data.city, data.county]
                  .filter(Boolean)
                  .join(" / ") || "无"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="详细地址" :span="2">{{
              data.address || "无"
            }}</el-descriptions-item>
            <el-descriptions-item label="邮政编码">{{
              data.postalCode || "无"
            }}</el-descriptions-item>

            <!-- 联系信息 -->
            <el-descriptions-item label="联系电话">{{
              data.phone || "无"
            }}</el-descriptions-item>
            <el-descriptions-item label="电子邮箱">{{
              data.email || "无"
            }}</el-descriptions-item>
            <el-descriptions-item label="官方网站">{{
              data.website || "无"
            }}</el-descriptions-item>

            <!-- 经营信息 -->
            <el-descriptions-item label="开业日期">{{
              data.openingDateStr || "无"
            }}</el-descriptions-item>
            <el-descriptions-item label="营业时间">{{
              data.operatingHours || "无"
            }}</el-descriptions-item>
            <el-descriptions-item label="店长姓名">{{
              data.managerName || "无"
            }}</el-descriptions-item>

            <!-- 图片信息 -->
            <el-descriptions-item label="门店图片" :span="2">
              <div v-if="data.shopImages" class="image-list">
                {{ data.shopImages.split(",").join(", ") }}
              </div>
              <span v-else>无</span>
            </el-descriptions-item>
            <el-descriptions-item label="资质证书" :span="2">
              <div v-if="data.certificateImages" class="image-list">
                {{ data.certificateImages.split(",").join(", ") }}
              </div>
              <span v-else>无</span>
            </el-descriptions-item>

            <!-- 系统信息 -->
            <el-descriptions-item label="创建时间">{{
              data.createdAtStr || "无"
            }}</el-descriptions-item>
            <el-descriptions-item label="最后更新">{{
              data.updatedAtStr || "无"
            }}</el-descriptions-item>
          </el-descriptions></el-scrollbar
        >
      </el-tab-pane>

      <!-- 商品管理 -->
      <el-tab-pane label="所有商品" name="goods">
        <el-scrollbar style="height: calc(100vh - 48px - 50px - 195px)">
          <div class="goods-management">
            <div style="display: flex; position: relative">
              <el-input
                v-model="searchKeyword"
                placeholder="搜索商品名称"
                clearable
                class="search-input"
              >
                <template #prefix>
                  <i class="el-icon-search"></i>
                </template>
              </el-input>
              <div
                style="
                  width: 100px;
                  margin-bottom: 16px;
                  position: absolute;
                  right: 0;
                "
              >
                <el-select v-model="category">
                  <el-option label="全部" value="全部"></el-option>
                  <el-option label="汽车服务" value="car_services"></el-option>
                  <el-option
                    label="汽车用品"
                    value="sys_car_supplies"
                  ></el-option>
                  <el-option
                    label="会员套餐"
                    value="sys_vip_packages"
                  ></el-option>
                </el-select>
              </div>
            </div>

            <el-table
              :data="goodsList"
              style="width: 100%"
              class="goods-table"
              height="calc(100vh - 400px)"
            >
              <el-table-column prop="name" label="商品名称" width="220" />
              <el-table-column prop="price" label="价格" width="120">
                <template #default="{ row }"
                  >¥{{ row.price.toFixed(2) }}</template
                >
              </el-table-column>
              <el-table-column prop="stock" label="库存" width="100" />
              <el-table-column prop="sales" label="销量" width="120" />
              <el-table-column label="状态" width="120">
                <template #default="{ row }">
                  <el-tag :type="row.status === 1 ? 'success' : 'danger'">
                    {{ row.status === 1 ? "上架中" : "已下架" }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              layout="total, sizes, prev, pager, next"
              :total="total"
              class="pagination"
            /></div
        ></el-scrollbar>
      </el-tab-pane>

      <!-- 数据统计 -->
      <el-tab-pane label="数据统计" name="stats">
        <el-scrollbar style="height: calc(100vh - 48px - 50px - 195px)">
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </el-scrollbar>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import * as echarts from "echarts";
import { useRouter, useRoute } from "vue-router";
import { nextTick, toRaw, watch } from "vue";
import {
  getCarShopDetail,
  getProductPaginationByShopId,
  toggleIsBan,
} from "@/api/carShop";
import { confirmBox } from "@/tools/tools";
import debounce from "@/tools/debounce";
// 1. 必须声明的响应式变量
const activeTab = ref("basic");

// 示例数据
const data = ref({});
const router = useRouter();
const goodsList = ref([]);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const searchKeyword = ref("");
const total = ref(0);
// 图表实例
let salesChart = null;
const salesChartRef = ref(null);

const route = useRoute();
// 操作方法
const handleToggleBlock = async () => {
  confirmBox(data.value.isBan === 1 ? "解除封禁" : "封禁店铺", async () => {
    const res = await toggleIsBan(route.params.id);
    if (res.code >= 0) {
      data.value.isBan = data.value.isBan === 0 ? 1 : 0;
      ElMessage.success(data.value.isBan === 0 ? "解除封禁成功" : "封禁成功");
    } else {
      ElMessage.error(res.message);
    }
  });
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
};

const bind = async () => {
  const res = await getCarShopDetail(route.params.id);
  if (res.code >= 0) {
    data.value = res.data;
    data.value.logo = "https://picsum.photos/100";
  }
};
const category = ref("全部");
const bindProduct = debounce(async () => {
  var params = {
    page: currentPage.value,
    limit: pageSize.value,
    key: searchKeyword.value,
    shopId: route.params.id,
  };
  if (category.value != "全部") params.category = category.value;
  const res = await getProductPaginationByShopId(params);
  if (res.code >= 0) {
    goodsList.value = res.data.data;
    total.value = res.data.total;
  }
});
// 生命周期
onMounted(async () => {
  await bind();
  await bindProduct();
});

// 监听分页切换
watch([currentPage, pageSize, searchKeyword, category], ([v1, v2, v3, v4]) => {
  // 防止重复请求
  if (currentPage.value === v1 && currentPage.value !== 1) {
    currentPage.value = 1;
  } else {
    bindProduct();
  }
});
</script>
<style lang="scss" scoped>
.el-descriptions {
  margin: 20px;
}

.el-descriptions-item__label {
  width: 120px;
  text-align: right;
  background-color: #f5f7fa;
}

.image-list {
  word-break: break-all;
  line-height: 1.6;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .el-descriptions {
    :deep(.el-descriptions-item) {
      display: block;
      width: 100%;
      margin-bottom: 8px;
    }

    .el-descriptions-item__label {
      display: block;
      width: 100%;
      text-align: left;
      padding-left: 0;
    }

    .el-descriptions-item__content {
      display: block;
      width: 100%;
      padding-left: 0;
    }
  }
}
.shop-detail-container {
  width: calc(100vw - 76px);
  height: calc(100vh - 48px - 50px);
  background-color: white;
  .header-content {
    display: flex;
    align-items: center;
    gap: 24px;

    .shop-logo {
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      background: linear-gradient(135deg, #409eff, #67c23a);

      .logo-placeholder {
        font-size: 24px;
        font-weight: 500;
        color: white;
      }
    }

    .header-text {
      .shop-title {
        margin: 0;
        font-size: 28px;
        color: #303133;
        letter-spacing: 1px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      }

      .shop-meta {
        margin-top: 12px;
        display: flex;
        align-items: center;
        gap: 16px;

        .status-tag {
          font-size: 14px;
          padding: 6px 12px;
          border-radius: 4px;
        }

        .create-time {
          color: #909399;
          font-size: 14px;

          i {
            margin-right: 4px;
          }
        }
      }
    }
  }

  .main-tabs {
    margin-top: 24px;

    :deep(.el-tabs__header) {
      background: #fff;
      padding: 0 24px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    }

    .info-card {
      background: #fff;
      padding: 24px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

      :deep(.desc-label) {
        width: 120px;
        font-weight: 500;
        color: #606266;
        background: #fafafa;
      }

      .license-images {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;

        .license-image {
          width: 220px;
          height: 160px;
          border-radius: 6px;
          transition: transform 0.2s;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

          &:hover {
            transform: translateY(-3px);
          }

          .image-error {
            @apply flex items-center justify-center h-full bg-gray-100 text-2xl text-gray-400;
          }
        }
      }

      .credit-rate {
        :deep(.el-rate__icon) {
          font-size: 18px;
        }
        :deep(.el-rate__text) {
          margin-left: 8px;
          font-size: 14px;
        }
      }
    }

    .goods-management {
      background: #fff;
      padding: 0 24px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

      .search-input {
        max-width: 400px;
        margin-bottom: 16px;
        :deep(.el-input__inner) {
          border-radius: 20px;
        }
      }

      .goods-table {
        :deep(.el-table__row) {
          transition: background 0.2s;

          &:hover {
            background: #f5f7fa;
          }
        }

        :deep(.el-table__cell) {
          padding: 12px 0;
        }
      }
    }

    .chart-container {
      background: #fff;
      padding: 24px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    }

    .pagination {
      margin-top: 16px;
      justify-content: flex-end;
    }
  }
}
</style>
